<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
  </head>
  <body>
    <input type="checkbox" id="info-button"/>
    <label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
    <canvas id="myCanvas"></canvas>

    <button id="requestPermission" style="position: absolute; display: none;">Enable Device Orientation</button>
    <div class="slideout-sidebar">
        <h1>Mobile Camera Controls</h1>
        <p>This example controls the camera rotation using Device Orientation events on mobile devices. Click on the screen to move forward.</p>
        <p><b>This examples needs to run on a mobile device and a secure https-connection.</b></p>
        <h3>Stats</h3>
        <ul>
            <li>
                <div id="time">Loading JavaScript modules...</div>
            </li>
        </ul>
        <h3>Components Used</h3>
        <ul>
            <li>
                <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
                   target="_other">Viewer</a>
            </li>
            <li>
                <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
                   target="_other">XKTLoaderPlugin</a>
            </li>
        </ul>
        <h3>Resources</h3>
        <ul>
            <li>
                <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
                   target="_other">Model source</a>
            </li>
        </ul>
    </div>
  </body>
  <script type="module">

    import {math, Viewer, XKTLoaderPlugin} from "../../dist/xeokit-sdk.min.es.js";

    const canvas = window.document.getElementById("myCanvas");

    const viewer = new Viewer({ canvasElement: canvas, transparent: true });

    viewer.cameraControl.active = false;

    const startOrientationListener = () => {
        new XKTLoaderPlugin(viewer).load({ src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt", edges: true });

        const rot = math.mat4();
        const tmpMat4 = math.mat4();

        let down = false;

        const pos = math.vec3([ 4, 1.7, 15-10 ]);

        canvas.addEventListener("touchstart", (event) => {
            down = true;
            event.preventDefault();
        });

        canvas.addEventListener("touchend", (event) => {
            down = false;
            event.preventDefault();
        });

        window.addEventListener("deviceorientation", (event) => {
            math.identityMat4(rot);

            math.mulMat4(math.rotationMat4v(window.orientation * math.DEGTORAD, [0,0,1], tmpMat4), rot, rot);

            math.mulMat4(math.rotationMat4v( event.gamma * math.DEGTORAD, [0,1,0], tmpMat4), rot, rot);
            math.mulMat4(math.rotationMat4v(-event.beta  * math.DEGTORAD, [1,0,0], tmpMat4), rot, rot);
            math.mulMat4(math.rotationMat4v(-event.alpha * math.DEGTORAD, [0,0,1], tmpMat4), rot, rot);

            math.mulMat4(math.rotationMat4v(Math.PI / 2, [1,0,0], tmpMat4), rot, rot);

            const camera = viewer.camera;
            const dir = math.mulMat4v4(rot, [ 0, 0, 1, 0 ], math.vec4());
            if (down) {
                math.addVec3(pos, math.mulVec3Scalar(dir, 1/60, math.vec3()), pos);
            }
            camera.eye  = pos;
            camera.look = math.addVec3(camera.eye, dir, math.vec3());
            camera.up   = math.mulMat4v4(rot, [ 0, 1, 0, 0], math.vec4()).slice(0, 3);
        });
    };

    function addInfoDiv(message) {
        const body = document.getElementsByTagName("body")[0];
        const infoDiv = document.createElement("div");
        infoDiv.style.position = "absolute";
        infoDiv.style.top = "50%";
        infoDiv.style.width = "100%";
        infoDiv.style.textAlign = "center";
        infoDiv.style.color = "red";
        infoDiv.innerText = message;
        infoDiv.style.backgroundColor = "white";
        body.appendChild(infoDiv);
    }

    const requestOrientationPermission = window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermission;
    if (typeof requestOrientationPermission === "function") {
        const button = document.getElementById("requestPermission");
        button.style.display = "";
        button.addEventListener("click", () => {
            button.style.display = "none";
            requestOrientationPermission().then(permissionState => {
                if (permissionState === "granted") {
                    console.log("Orientation permission granted");
                    startOrientationListener();
                } else {
                    addInfoDiv("Error: Device Orientation permission denied.");
                }
            });
        });
    } else {
        addInfoDiv("Error: No Device Orientation API available on this device.");
    }

  </script>
</html>